<template>
  <div id="top-header">
    <!-- <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" /> -->
    <div class="center-title">数字化改革场景全生命周期一体化平台</div>
    <div class="sysClass" @click="gotoSysitem">进入系统</div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth.js';
import { getMenuList } from '@/api/login';

export default {
  name: 'TopHeader',
  methods: {
    async gotoSysitem() {
      let origtinMenuId = '';
      let origtinMenuTitle = '';
      await getMenuList({
        roleId: getToken('xcRoleId'),
        state: 4,
        url: '',
        appId: getToken('sysitemId'),
        isMeta: true
      }).then(res => {
        if (res.success) {
          if (res.data[0].children.length !== 0) {
            res.data[0].children.map(o => {
              if (o.path === res.data[0].redirect) {
                origtinMenuId = o.id;
                origtinMenuTitle = o.title;
              }
            });
          }
        }
      });
      const params = {
        isHideLeft: '1',
        isHideTop: '1',
        menuId: origtinMenuId,
        title: origtinMenuTitle,
        sId: 'TabsTable',
        flag: 0
      };
      this.$router.push({
        path: '/layoutContainer',
        query: params
      });
    }
  }
};
</script>

<style scoped lang="scss" >
.sysClass{
    position: absolute;
    right: 20px;
    top: 5px;
    font-size: 16px;
    font-weight: bolder;
    color:rgb(25, 129, 246)
}
.sysClass:hover{
  cursor: pointer;
  text-decoration: underline
}
#top-header {
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  background: url('../../../assets/images/mapTest1/titleBg1.png') no-repeat;
  background-size:100% 100%;
  .header-center-decoration {
    width: 40%;
    height: 60px;
    margin-top: 20px;
  }

  .header-left-decoration, .header-right-decoration {
    width: 25%;
    height: 60px;
  }

  .center-title {
    position: absolute;
    font-size: 20px;
    font-weight: bold;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
  }
}
</style>
